@import "@/style/variable.scss";
.sort {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  font-size: 0.2rem;
  padding: 0.1rem;
  border-radius: 50%;
  position: fixed;
  right: 0.1rem;
  top: 3%;
  z-index: 3003;
  transition: all 0.5s ease-in;
  -webkit-transition: all 0.5s ease-in;
  @include button-boxcolor();
}
.sortOne {
  transform: rotate(90deg);
  color: #000;
  background: #fff;
}
.sortSecond {
  transform: rotate(270deg);
  color: #fff;
  background: #000;
}
.returnTop,
.download,
.darkModel {
  font-size: 0.15rem;
  opacity: 0.9;
  position: fixed;
  right: 0.15rem;
  bottom: 0.68rem;
  z-index: 3003;
  padding: 0.1rem;
  @include content-bgcolor();
  @include font-color();
  border-radius: 50%;
  @include button-boxcolor();
}

.gogogo {
  bottom: 0.2rem;
  transition: all 0.5s ease-in;
  -webkit-transition: all 0.5s ease-in;
  font-size: 0.15rem;
  opacity: 0.9;
  position: fixed;
  right: 0.15rem;
  z-index: 3003;
  padding: 0.1rem;
  @include font-color();
  border-radius: 50%;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  animation-name: breathe;
  -webkit-animation-duration: 1700ms;
  animation-duration: 1700ms;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
@-webkit-keyframes breathe {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes breathe {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
.download {
  bottom: 1.68rem;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.darkModel {
  bottom: 1.18rem;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.returnTop {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
